{% extends "base.html" %}
{% block title %}系统管理中心{% endblock %}

{% block styles %}
{{ super() }}
<!-- 从新封装后的带过期时间处理的cache处理方法，依赖localforage.js -->
<script src="/static/js/localcache.js"></script>

<!-- 用户数据处理JS，依赖localcache.js -->
<script src="/static/js/user_data.js"></script>

<style>
    /* 本页所用的CSS */
    .bd-navbar {
        /* 透明度0.6 */
        background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), 0.68));
        box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15),inset 0 -1px 0 rgba(0,0,0,0.15);
    }

    .video-custom-size {
        width: 280px; /* 设置你想要的宽度 */
        height: 180px; /* 设置你想要的高度 */
    }
</style>
{% endblock %}

{% block content %}
<div class="row vh-100">
    <div class="col-lg-2 border-end" id="navmenu">
        <!-- 侧边栏菜单 -->
        <div class="flex-shrink-0 p-3 sticky-top">
            <div class="d-flex align-items-center pb-3 mb-3 link-body-emphasis text-decoration-none border-bottom">
                <svg xmlns="http://www.w3.org/2000/svg" width="30" height="24" fill="currentColor" class="bi bi-cast" viewBox="0 0 16 16">
                    <path d="m7.646 9.354-3.792 3.792a.5.5 0 0 0 .353.854h7.586a.5.5 0 0 0 .354-.854L8.354 9.354a.5.5 0 0 0-.708 0"/>
                    <path d="M11.414 11H14.5a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.5-.5h-13a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .5.5h3.086l-1 1H1.5A1.5 1.5 0 0 1 0 10.5v-7A1.5 1.5 0 0 1 1.5 2h13A1.5 1.5 0 0 1 16 3.5v7a1.5 1.5 0 0 1-1.5 1.5h-2.086z"/>
                </svg>
                <span class="fs-5 fw-semibold">资源导航</span>
            </div>
            <ul class="list-unstyled ps-0">
                <li class="mb-1">
                    <button class="btn btn-toggle d-inline-flex align-items-center rounded border-0" data-bs-toggle="collapse" data-bs-target="#homecollapse" aria-expanded="true">
                        资源浏览
                    </button>
                    <div class="collapse show" id="homecollapse" >
                        <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
                            <li><a href="{{ url_for('fontact.viewfonts') }}" class="link-body-emphasis d-inline-flex link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover">
                                字体目录浏览</a>
                            </li>
                            <li><a href="{{ url_for('mcpicview.mcpicshow') }}" class="link-body-emphasis d-inline-flex link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover">
                                Minio 图片浏览</a>
                            </li>
                            <li><a href="{{ url_for('mcpicview.mcmvshow') }}" class="link-body-emphasis d-inline-flex link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover">
                                视频浏览</a>
                            </li>
                            <li><a href="#" class="link-body-emphasis d-inline-flex link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover">
                                音频浏览</a>
                            </li>

                        </ul>
                    </div>
                </li>
                <li class="mb-1">
                    <button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed"
                        data-bs-toggle="collapse" data-bs-target="#dashboard-collapse" aria-expanded="false">
                        应用功能
                    </button>
                    <div class="collapse" id="dashboard-collapse" >
                        <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
                            <li><a href="{{ url_for('mdedit.mdeditshow') }}" class="link-body-emphasis d-inline-flex link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover">
                                Markdown编辑器</a>
                            </li>
                            <li><a href="{{ url_for('cardedit.cardshow') }}" class="link-body-emphasis d-inline-flex link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover">
                                H5内容编辑器</a>
                            </li>
                            <li><a href="{{ url_for('mdnice.index') }}" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Markdown 美化</a>
                            </li>
                            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Annually</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="mb-1">
                    <button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed"
                        data-bs-toggle="collapse" data-bs-target="#orders-collapse" aria-expanded="false">
                        背景图片资源
                    </button>
                    <div class="collapse" id="orders-collapse" >
                        <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
                            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">New</a></li>
                            <li class="mb-1 ps-2">
                                <button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed"
                                    data-bs-toggle="collapse" data-bs-target="#fengjing-collapse" aria-expanded="false" style="font-size: small;">
                                    风景图片资源
                                </button>
                                <div class="collapse" id="fengjing-collapse" >
                                    <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
                                        <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">国内的</a>
                                        </li>
                                        <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">国外的</a>
                                        </li>
                                        <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">太空的</a>
                                        </li>
                                        <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">....</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Shipped</a>
                            </li>
                            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Returned</a>
                            </li>
                        </ul>
                    </div>
                </li>
                
                <li class="mb-1">
                    <button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed"
                        data-bs-toggle="collapse" data-bs-target="#account-collapse" aria-expanded="false">
                        PPT模板资源
                    </button>
                    <div class="collapse" id="account-collapse" >
                        <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
                            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">New...</a>
                            </li>
                            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Profile</a>
                            </li>
                            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Settings</a>
                            </li>
                            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Sign out</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="border-top my-3"></li>
            </ul>
        </div>
    </div>
    <!-- 右侧内容 -->
    <div id="rightcont" class="col-lg-10">
        
        <header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
            <div class="d-flex justify-content-between gap-3">
                <!-- 这是顶端的导航栏 -->
                <button type="button" id="showslide" class="btn btn-secondary">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left-right"
                        viewBox="0 0 16 16">
                        <path fill-rule="evenodd"
                            d="M1 11.5a.5.5 0 0 0 .5.5h11.793l-3.147 3.146a.5.5 0 0 0 .708.708l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708.708L13.293 11H1.5a.5.5 0 0 0-.5.5m14-7a.5.5 0 0 1-.5.5H2.707l3.147 3.146a.5.5 0 1 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 4H14.5a.5.5 0 0 1 .5.5">
                        </path>
                    </svg>
                </button>
                <div>
                    <ul class="nav justify-content-end">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="{{ url_for('bbs.bbsindex') }}">论坛</a>
                          </li>
                        <li class="nav-item">
                          <a class="nav-link active" aria-current="page" href="#">通知</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="{{ url_for('user.login') }}">登录</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="{{ url_for('user.register') }}">注册</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('user.logout') }}">退出</a>
                          </li>
                        <li class="nav-item">
                          <a class="nav-link disabled">用户</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="{{ url_for('profile.profile') }}">我的资料</a>
                        </li>
                      </ul>
                </div>

            </div>
        </header>
        <div class="row py-3 ps-2">
            <!-- 这是主要内容区域 -->
            {% block maincontent %}
            <h1>这是主要内容区域</h1>
            {% endblock %}
        </div>
    </div>
</div>
{% block adminscripts %}
<!-- 管理页面的公用JS -->
<!-- 显示和隐藏侧边栏菜单 id="navmenu" -->
<script>
    document.getElementById('showslide').addEventListener('click', function () {
        var navmenu = document.getElementById('navmenu');
        var rightcont = document.getElementById('rightcont');
        if (navmenu.style.display == 'none') {
            navmenu.style.display = 'block';
            rightcont.classList.remove('col-lg-12');
            rightcont.classList.add('col-lg-10');
        } else {
            navmenu.style.display = 'none';
            rightcont.classList.remove('col-lg-10');
            rightcont.classList.add('col-lg-12');
        }
    });
</script>

<script>
    /**
    * 登录成功后，保存用户数据到本地缓存
    */
    document.addEventListener('DOMContentLoaded', async function() {
        // 获取页面中的用户数据(如果存在)
        let userData = null;
        
        // 尝试获取后端传递的user_data
        userData = {{ user_data|tojson if user_data else 'null' }};


        // 如果有用户数据，并且登录成功
        if (userData && userData.success) {
            
            try {
                // 保存用户数据到本地缓存
                await UserDataCache.saveUserData(userData);
                
            } catch (error) {
                console.error('保存用户数据失败:', error, userData);
                
            }
        } else if (userData && !userData.success) {
            // 登录失败，显示错误信息
            console.log('登录失败，原因：', userData.message || '未知错误');
        }
        
    });
</script>

{% endblock %}

{% endblock %}

